import React from 'react';

export default class EntrancePage extends React.Component {

  renderMenuItem(group) {
    let menuItemEles = []
    for (let itemindex = 0; itemindex < group.groupItem.length; itemindex++) {
      let item = group.groupItem[itemindex];
      menuItemEles.push(
        (
          <div class="entrance-item">
            <a class="entrance-item-icon" style={{backgroundImage: `url(${item.itemIcon})`}} href={item.itemUrl} ></a>
            <div class="entrance-item-title">{item.itemTitle}</div>
          </div>
        )
      )
    }
    return menuItemEles;
  }

  renderMenu(menuConfig) {
    let menuEles = []

    for (let index = 0; index < menuConfig.length; index++) {
      let group = menuConfig[index];
      let items = this.renderMenuItem(group)
      menuEles.push(
        (
          <div class="entrance-wrapper">
            <div class="entrance-title">
              <span class="entrance-title-span">{group.groupTitle}</span>
            </div>
            <div class="entrance-content">
              {items}
            </div>
          </div>
        )
      )
    }
    return menuEles;
  }

  render() {
    const menuConfig = window.menuPageConfig || [];
    let menu = this.renderMenu(menuConfig);
    return (
      <div class="wea-yulin-entrance-page">
        {menu}
      </div>
    );
  }
}